<template>
    <h4>x.y:{{x.y}}</h4>
    <button @click="x.y++">+1</button>
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <h2>薪资:{{job.j1.salary}}</h2>
    <button @click="name += '~'">修改名字</button>
    <button @click="age++">增加年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { reactive, ref, shallowRef, toRefs } from 'vue'
export default {
    name: 'Demo',
    components: {},
    setup(){
        // js let person = shallowReactive({ // 只考虑第一层数据的响应式
        let person = reactive({
            name: '张三',
            age: 18,
            job: {
                j1: {
                    salary: 1
                }
            }
        })
        let h = ref({
            x:0
        })
        console.log(h)
        let x = shallowRef({
            y:0
        })
        console.log(x)

        return {
            x,h,
            ...toRefs(person)
        }
    }
}
</script>

<style>

</style>